{extend name='/themes/mass/common' }


{block name="header_link"}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/lib/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/css/animate.min.css">
<style>
    .swiper-slide {
        position: relative;
    }
    .swiper-slide_title {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0.3));
        text-align: center;
        color: #fff;
        padding: 5px 10px;
    }
    .archive__empty {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .archive__empty-icon {
        margin-bottom: 20px;
        fill: var(--Secondary--Text);
    }
    .archive__empty span {
        margin-bottom: 15px;
        font-size: 14px;
        color: var(--Secondary--Text);
    }
    .main .main_wrap .main_box .main_header .main_header_left {
        width: 100%;
    }

</style>

{/block}
{block name="Loading"}
{/block}
{block name="header"}
{include file='/themes/mass/common/header'}
{/block}

{block name="main"}
<div class="wrap">
    <div class="main">
        <!-- 主体 -->
        <div class="main_wrap">
            <div class="main_box">
                <div class="main_header" style="">
                    <div class="main_header_left">
                        <div class="banner" data-json="{$TemplateConfig.slideshow.val}">

                            <!-- Swiper -->
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                </div>
                                <!-- Add Pagination -->
                                <div class="swiper-pagination"></div>
                                <!-- Add Arrows -->

                            </div>

                        </div>
                    </div>
                    <!--                    <div class="main_header_right">-->
                    <!--                        <div class="recommend">-->
                    <!--                            <div class="recommend_item">-->
                    <!--                                <div class="recommend_item_bg">-->
                    <!--                                    <a href="#"><img src="/static/home/images/recommend_1.jpg" alt=""></a>-->
                    <!--                                </div>-->
                    <!--                                <div class="recommend_item_icon">推荐</div>-->
                    <!--                                <div class="recommend_item_title">推荐一</div>-->
                    <!--                            </div>-->
                    <!--                            <div class="recommend_item">-->
                    <!--                                <div class="recommend_item_bg">-->
                    <!--                                    <a href="#"><img src="/static/home/images/recommend_2.jpg" alt=""></a>-->
                    <!--                                </div>-->
                    <!--                                <div class="recommend_item_icon">推荐</div>-->
                    <!--                                <div class="recommend_item_title">推荐二</div>-->
                    <!--                            </div>-->
                    <!--                                <div class="recommend_item">-->
                    <!--                                    <div class="recommend_item_bg">-->
                    <!--                                        <a href="#"><img src="/static/home/images/recommend_3.jpg" alt=""></a>-->
                    <!--                                    </div>-->
                    <!--                                    <div class="recommend_item_icon">推荐</div>-->
                    <!--                                    <div class="recommend_item_title">推荐三</div>-->
                    <!--                                </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
                <!-- 文章 -->
                <div class="main_article_wrap">
                    <!-- 文章Tag -->
                    <div class="main_article_title">
                        <div class="main_article_title_tag">
                            <a class="main_article_title_tag_item main_article_title_tag_item_selected"
                               href="#">最新文章</a>
                            <!--                            <a class="main_article_title_tag_item" href="#">热门文章</a>-->
                            <!--                            <a class="main_article_title_tag_item" href="#">点赞最多</a>-->
                            <!--                            <a class="main_article_title_tag_item" href="#">评论最多</a>-->
                        </div>
                    </div>
                    <!-- 文章 -->
                    <div class="article_list">
                        {empty name='articleList'}
                        <div class="archive__empty">
                            <svg class="archive__empty-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="120" height="120">
                                <path d="M483.322 136.98l-2.08-116.502A19.278 19.278 0 0 1 499.266 0h2.512c12.439.104 22.574 10.063 22.574 22.43l4.048 114.446a22.702 22.702 0 0 1-22.606 22.43c-10.136-1.952-22.479-10.079-22.479-22.326h.016zm165.034 16.943c-8.751 8.695-23.27 5.847-32.045 0a22.638 22.638 0 0 1 0-31.702L700.8 44.156a23.006 23.006 0 0 1 31.933 0c8.76 8.703 8.76 23.118 0 28.958l-84.377 80.793zm-287.215 0l-84.369-80.921c-8.767-5.824-8.767-20.135 0-28.95a23.006 23.006 0 0 1 31.917 0l84.497 78.058a22.606 22.606 0 0 1 0 31.7c-8.775 5.944-23.278 8.8-32.045.113zm488.686 679.445v9.84l-8.871 3.663-306.238 125.43-5.76 2.64V645l9.904 17.15 60.283 105.063a15.206 15.206 0 0 0 13.03 7.327 14.879 14.879 0 0 0 7.952-2.055L850.17 658.047V833.36h-.328l-.016.008zm-671.486 13.503l-9.44-3.655V654.824l.448.456 236.396 117.086a23.86 23.86 0 0 0 7.96 2.047 17.15 17.15 0 0 0 14.158-7.759l59.715-104.615 9.92-17.158V977.46l-13.152-5.28-306.005-125.317zm-21.998-415.308l4.72-8.8 323.411 162.85 4.84 2.616-2.76 4.696-77.57 138.932-2.655 4.24-4.72-2.056L77.15 572.663l5.888-10.4 73.298-130.708h.008zM484.93 304.646l12.56-4.12V552.41h-6.336l-1.608-1.024-295.063-147.868 9.92-3.663 280.527-95.208zm328.716 95.784l14.175 4.695-291.487 146.708-7.375 3.663V303.054l5.303 1.6 279.392 95.792v-.016zM935.82 562.256l7.367 13.503-320.293 159.306-4.847 2.056-2.52-4.12-77.113-139.508-2.528-4.688 4.704-2.64L858.722 426.98l2.192 3.664 74.922 131.62h-.016zm49.1 12.463L884.863 397.334v-1.016a16.047 16.047 0 0 0-6.775-7.327l-359.05-133.797-1.04-.56-1.031-.464a14.967 14.967 0 0 0-7.968-2.176 13.71 13.71 0 0 0-7.84 2.176l-1.023.464-1.144.56-357.881 134.253a25.649 25.649 0 0 0-9.455 8.815l-100.04 178.52a19.414 19.414 0 0 0 8.88 24.958l81.249 40.053 8.43 4.231v207.15a18.91 18.91 0 0 0 10.48 17.151l358.45 151.42c2.99 1.487 6.223 2.159 9.438 2.159 3.248 0 6.48-.672 9.455-2.16l356.498-151.987h1.04a18.022 18.022 0 0 0 11.99-17.158V644.417l7.84-4.128 78.593-40.157 3.232-1.503 3.008-2.048a15.807 15.807 0 0 0 4.72-21.87v.008z"></path>
                            </svg>
                            <span>没有找到查询到结果！</span>
                        </div>
                        {else/}
                        {foreach $articleList as $key=>$item}
                        <div class="article_item bounceIn">
                            <a href="/article/{$item.aid}" class="article_item_letf">
                                <div class="article_item_letf">
                                    {empty name='item.cover'}
                                    <img  lay-src="https://static.xkbk.top/xkblog/assets/thumb/{:mt_rand(1,40)}.jpg" src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/img/lazyload.jpg" alt="">
                                    {else/}
                                    <img  lay-src="{$item.cover}" alt="" src="https://cdn.jsdelivr.net/npm/typecho-joe-next@6.0.0/assets/img/lazyload.jpg">
                                    {/empty}
                                    <div class="article_item_date_icon">{$item.release_date | date = 'Y-m-d' }</div>
                                </div>
                            </a>
                            <div class="article_item_right">
                                <div class="article_item_right_header">
                                    <div class="article_item_title"><a href="/article/{$item.aid}">{$item.title}</a></div>
                                    <div class="article_item_content"><a href="/article/{$item.aid}">
                                        {$item.content}
                                    </a></div>
                                </div>
                                <div class="article_item_right_footer">
                                    <div class="article_item_info">{$item.release_date | date = 'Y-m-d' }<span class="article_item_statistical">
                                                / {$item.browse}阅读 / {$item.comments_total}评论 / {$item.praise}点赞</span>
                                    </div>
                                    <div class="article_item_class" style="display: {$item.Categories[0]['catname'] ?: '' ? 'block' : 'none'}">
                                        <span class="iconfont icon-tubiao-" style="transform: translate(0px, 4px);
    display: inline-block;"></span><a href="/class/{$item.Categories[0]['catid'] ?: ''}">{$item.Categories[0]['catname'] ?: ''}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/foreach}
                        {/empty}
                    </div>
                    <div class="load_more_wrap" style="display: flex;justify-content: space-between">
                        <a href="/index?page={$page - 1}" style="opacity: {$page - 1 == 0 ? '0' : '1'};">
                            <div class="load_more">上一页</div>
                        </a>
                        <a href="/index?page={$page + 1}" style="opacity: {$page + 1 > $totalPage ? '0' : '1'};">
                            <div class="load_more">下一页</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        {include file="/themes/mass/common/aside"}
    </div>
</div>


{/block}


{block name="footer"}
{include file='/themes/mass/common/footer'}
{/block}

{block name="action"}
{include file='/themes/mass/common/action'}
{/block}


{block name="footer_script"}
{block name="footer_script"}
<script src="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/js/wow.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/lib/swiper/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AcmenXiaoKe/static@master/template/mass/js/index.js"></script>
{/block}